<template>
	<view class="content">
		<view class="flex flex-direction response align-center">
			<view class="flex justify-between align-center margin-top" style="width: 80%;">
				<view @click="prevMonth" class="cuIcon-back" style="margin-top: 10upx;"></view>
				<view>
					<picker mode="date" fields="month" @change="monthChange">
						<text class="bold">{{ time.year }}年{{ time.month + 1 }}月</text>
					</picker>
				</view>
				<view @click="nextMonth" class="cuIcon-right" style="margin-top: 10upx;"></view>
			</view>
			<view class="response cu-card case">
				<view class="cu-item shadow">
					<view class="flex align-center justify-center response margin-top">
						<view class="flex" v-for="item in weeks">
							<view class="week">{{ item }}</view>
						</view>
					</view>
					<view class="flex justify-center flex-wrap margin-top">
						<template v-for="item in visibleDays" :Key="item.day">
							<view class="day-box flex flex-direction">
								<view
									class="day"
									@click="clickDate(item.day)"
									:style="[isToday(item.day) && todayObj, isClick(item.day) && selectedObj]"
									:class="[{ selected: isClick(item.day) }, { notCurrentMonth: !isCurrentMonth(item.day) }]"
								>
									<view class="flex flex-direction align-center justify-center">
										<view style="height: 60upx;padding-top: 10upx;">{{ item.day | dayFilter }}</view>
										<template v-if="showText">
											<view v-if="isCurrentMonth(item.day)" class="day-text" :style="{ color: textColor }">{{ item.data.value || '' }}</view>
										</template>
										<template v-if="showDot">
											<view
												v-if="isCurrentMonth(item.day) && item.data.dot"
												class="day-dot"
												:class="isToday(item.day) || isClick(item.day) ? 'dot-white' : 'dot-blue'"
											></view>
										</template>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const getYearMonthDay = date => {
	let year = date.getFullYear();
	let month = date.getMonth();
	let day = date.getDate();
	return {
		year,
		month,
		day
	};
};
const getDate = (year, month, day) => {
	return new Date(year, month, day);
};

export default {
	name: 'tale-calendar',
	data() {
		return {
			iArr: [1, 2, 3, 4, 5, 6],
			jArr: [1, 2, 3, 4, 5, 6, 7],
			value: new Date(),
			weeks: ['日', '一', '二', '三', '四', '五', '六'],
			click_time: {},
			month_data: this.extraData,
			time: this.defaultTime,
			todayObj: {
				background: this.bgColor,
				color: '#ffffff'
			},
			selectedObj: {
				background: this.selColor,
				color: '#ffffff'
			}
		};
	},
	props: {
		bgColor: {
			type: String,
			default: '#4C81EB'
		},
		selColor: {
			type: String,
			default: '#4198f8'
		},
		textColor: {
			type: String,
			default: '#4198f8'
		},
		defaultTime: {
			type: Object,
			default: () => {
				return {
					year: getYearMonthDay(new Date()).year,
					month: getYearMonthDay(new Date()).month
				};
			}
		},
		extraData: {
			type: Array,
			default: () => {
				return []; // {date: '2020-6-3', value: '签到', dot: true, active: true}
			}
		},
		showText: {
			type: Boolean,
			default: true
		},
		showDot: {
			type: Boolean,
			default: false
		}
	},
	filters: {
		dayFilter(val) {
			return val.getDate();
		}
	},
	watch: {
		extraData: {
			handler(newV, oldV) {
				if (newV !== oldV) {
					this.month_data = newV;
				}
			},
			deep: true
		}
	},
	computed: {
		visibleDays() {
			// 计算当月展示日期
			let {
				time: { year, month },
				month_data
			} = this;
			let currentFirstDay = getDate(year, month, 1);
			let week = currentFirstDay.getDay();
			let startDay = currentFirstDay - week * 60 * 60 * 1000 * 24;
			let arr = [];
			for (let i = 0; i < 42; i++) {
				let day = new Date(startDay + i * 60 * 60 * 1000 * 24);
				let { year: dayY, month: dayM, day: dayD } = getYearMonthDay(day);
				let data = {};
				for (let item of month_data) {
					let dateString = item.date;
					let dateArr = dateString.indexOf('-') !== -1 ? dateString.split('-') : dateString.indexOf('/') !== -1 ? dateString.split('/') : [];
					if (dateArr.length === 3 && Number(dateArr[0]) === Number(dayY) && Number(dateArr[1]) === Number(dayM) + 1 && Number(dateArr[2]) === Number(dayD)) {
						data = item;
					}
				}
				let obj = {
					day,
					data
				};
				arr.push(obj);
			}
			return arr;
		}
	},
	mounted() {},
	methods: {
		isCurrentMonth(date) {
			// 是否当月
			let { year, month } = getYearMonthDay(getDate(this.time.year, this.time.month, 1));
			let { year: y, month: m } = getYearMonthDay(date);
			return year === y && month === m;
		},
		isToday(date) {
			// 是否当天
			let { year, month, day } = getYearMonthDay(new Date());
			let { year: y, month: m, day: d } = getYearMonthDay(date);
			return year === y && month === m && day === d;
		},
		isClick(date) {
			// 是否是点击日期
			let { click_time } = this;
			if (!click_time.day) return false;
			let { year, month, day } = getYearMonthDay(getDate(click_time.year, click_time.month, click_time.day));
			let { year: y, month: m, day: d } = getYearMonthDay(date);
			return year === y && month === m && day === d;
		},
		clickDate(date) {
			// 点击日期
			let { year, month, day } = getYearMonthDay(date);
			this.click_time = { year, month, day };
			this.$emit('calendarTap', { year, month, day });
		},
		prevMonth() {
			// 上一月
			let {
				time: { year, month }
			} = this;
			let d = getDate(year, month, 1);
			d.setMonth(d.getMonth() - 1);
			this.time = getYearMonthDay(d);
			// this.click_time = {};
			this.$emit('monthTap', getYearMonthDay(d));
		},
		nextMonth() {
			// 下一月
			// 获取当前的年月的日期
			let {
				time: { year, month }
			} = this;
			let d = getDate(year, month, 1);
			d.setMonth(d.getMonth() + 1);
			this.time = getYearMonthDay(d);
			// this.click_time = {};
			this.$emit('monthTap', getYearMonthDay(d));
		},
		monthChange(e) {
			let { value } = e.detail;
			let timeArr = value.split('-');
			this.time = { year: timeArr[0], month: timeArr[1] - 1, day: 1 };
			this.$emit('monthTap', { year: timeArr[0], month: timeArr[1] - 1, day: 1 });
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	width: 750rpx;
	margin: 0 auto;
}
.bold {
	font-weight: bold;
	font-size: 28rpx;
}
.year-month {
	padding-top: 20rpx;
}
.week {
	min-width: 90upx;
	text-align: center;
	color: #999999;
}
.day-box {
	min-width: 90upx;
	text-align: center;
}
.day {
	width: 90rpx;
	height: 90rpx;
	line-height: 60rpx;
	border-radius: 50%;
	text-align: center;
	font-weight: 600;
}
.day-text {
	font-size: 22rpx;
}
.day-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: #4198f8;
}
.dot-white {
	background: #ffffff;
}
.dot-blue {
	background: #4198f8;
}
.today,
.selected {
	background: #4198f8;
	color: #ffffff;
}
.notCurrentMonth {
	color: #999999;
	pointer-events: none;
	background: none;
}
</style>
